<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教室后台-不学也通</title>
    <style> 
        .container{
            min-height: 100vh;
        }
        .container.nav{
            min-height: 100vh;
            background-color: #fff;
        }

        .link-secondary{
            text-decoration: none;
        }
        .link-secondary:hover{
            color: #0d6efd !important;
        }
    </style>
</head>
<body>
    <!--container是bootstrap的居中窄的显示方案-->
    <div class="container bg-body-secondary">
        <div class="row">
            <div class="col-md-2 leftmenu">
                <div class="row mt-5">
                    <img style="width: 6rem;height: 6rem;"class="img-thumbnail mx-auto d-block rounded-circle" src="" alt="头像">
                </div>
                <div class="row">
                    <h3 class="text-center"></h3>
                </div>
                <div class="mt-3 d-flex justify-content-around"> 
                    <a href="#" class="btn btn-outline-primary rounded-pill btn-sm">账号管理</a>
                    <a href="#" class="btn btn-outline-warning rounded-pill btn-sm">输入邀请码</a>
                </div>
                <!--菜单导航-->
                <ul class="list-group mt-3"></ul>
                <li class="list-group-item border border-0">
                    <a class="link-secondary" href="#">
                        <i class="bi bi-mortarboard-fill"></i>
                        学期教学
                    </a>
                </li>
                <li class="list-group-item border border-0">
                    <a class="link-secondary" href="#">
                        <i class="bi bi-mortarboard-fill"></i>
                        课程
                    </a>
                </li>
                <li class="list-group-item border border-0">
                    <a class="link-secondary" href="#">
                        <i class="bi bi-mortarboard-fill"></i>
                        教学
                    </a>
                </li>
                <li class="list-group-item border border-0">
                    <a class=“link-secondary” href="#">
                        <i class="bi bi-envelope-paper-fill"></i>
                        收件箱
                    </a>
                </li>
                <li class="list-group-item border border-0">
                    <a class="link-secondary" href="#">
                        <i class="bi bi-people"></i>
                        小组
                    </a>
                </li>
            </div>
            <div class="col-md-9 kc ms-3">
                <div class="row mt-3">
                    <!--row似乎不能同时使用flex布局-->
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">我教的课程</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">我学的课程</a>
                        </li>
                        <li class="nav-item">
                            <select class="form-select" aria-label="select example">
                                <option selected value="-1">请选择学期</option>
                                <option value="0">2022-2023第二学期</option>
                                <option value="1">2022-2023第一学期</option>
                                <option value="2">2021-2022第二学期</option>
                                <option value="3">2021-2022第一学期</option>
                            </select>
                        </li>
                        <li class="nav-item ms-5">
                            <input type="text" class="form-control" placeholder="请输入课程名">
                            <i class="bi bi-search" style="position: absolute;right: 1rem;top: 0.7rem;"></i>
                        </li>
                        <li class="nav-item ms-5">
                            <a class="nav-link link-success" href="#">
                                <i class="bi bi-plus-circle-fill"></i>
                                创建文件夹
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link link-success" href="#">
                                <i class="bi bi-plus-circle-fill"></i>
                                创建课程
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="row">学习选择栏</div>
                <div class="row">
                    <div class="card" style="width:  18rem;">
                        <img src="./img/u=2379173324,3055191993&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" class="card-img-top" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-001</h6>
                            <h6 class="mt-1 text-muted">教师</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17<i class="bi bi-chevron-right"></i></div>
                            </h6>
                        </div>
                    </div>
                    <div class="card" style="width:  18rem;">
                        <img src="./img/u=2379173324,3055191993&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" class="card-img-top" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-001</h6>
                            <h6 class="mt-1 text-muted">教师</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17<i class="bi bi-chevron-right"></i></div>
                            </h6>
                        </div>
                    </div>
                    <div class="card" style="width:  18rem;">
                        <img src="./img/u=2379173324,3055191993&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" class="card-img-top" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-001</h6>
                            <h6 class="mt-1 text-muted">教师</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17<i class="bi bi-chevron-right"></i></div>
                            </h6>
                        </div>
                    </div>
                    <div class="card" style="width:  18rem;">
                        <img src="./img/u=2379173324,3055191993&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" class="card-img-top" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-001</h6>
                            <h6 class="mt-1 text-muted">教师</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17<i class="bi bi-chevron-right"></i></div>
                            </h6>
                        </div>
                        <!--菜单导航-->
                        <ul class="list-group mt-3">
                            <li class="list-group-item border border-0">
                                <a class="link-secondary" href="#">
                                    <i class="bi bi-mortarboard-fill"></i>
                                    学期教学
                                </a>
                            </li>
                            <li class="list-group-item border border-0">
                                <a class="link-secondary" href="#">
                                    <i class="bi bi-mortarboard-fill"></i>
                                    课程
                                </a>
                            </li>
                            <li class="list-group-item border border-0">
                                <a class="link-secondary" href="#">
                                    <i class="bi bi-mortarboard-fill"></i>
                                    教学
                                </a>
                            </li>
                            <li class="list-group-item border border-0">
                                <a class="link-secondary" href="#">
                                    <i class="bi bi-mortarboard-fill"></i>
                                    收件箱
                                </a>
                            </li>
                            <li class="list-group-item border border-0">
                                <a class="link-secondary" href="#">
                                    <i class="bi bi-people"></i>
                                    小组
                                </a>
                            </li>
                            <li class="list-group-item border border-0">
                                <a class="link-secondary" href="#">
                                    <i class="bi bi-chat-dots"></i>
                                    消息
                                </a>
                            </li>
                            <li class="list-group-item border border-0">
                                <a class="link-secondary" href="#">
                                    <i class="bi bi-mortarboard-fill"></i>
                                    下载中心
                                </a>
                            </li>
                        </ul>找文档图片文件@消息更多酷应用
                    </div>
                    <div class="col-md-9 kc ms-3">
                        <div class="row mt-3 pb-1 border-bottom border-secondary">
                            <div class="col-md-2">添加课程</div>
                            <div class="col-md-1 offset-md-8">
                                <a class="nav-link link-success" href="#">返回</a>
                            </div>
                        </div>
                        <div class="row">
                            <form>
                                <div class="mb-3 row">
                                    <label for="course-number" class="col-sm-2 col-form-label">课程编号:</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control-plaintext" id="course-number" value="">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="course-name" class="col-sm-2 col-form-label">课程名称:</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="course-name">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="course-department" class="col-sm-2 col-form-label">院系:</label>
                                    <div class="col-sm-10">
                                        <select class="form-select" name="" id="course-department">
                                            <option selected>--请选择院系--</option>
                                            <option value="1">计算机科学应用系</option>
                                            <option value="2">中文系</option>
                                            <option value="3">教育系</option>
                                            <option value="4">旅游与酒店系</option>
                                            <option value="5">幼儿师范系</option>
                                            <option value="6">音乐系</option>
                                            <option value="7">美术系</option>
                                            <option value="8">体育系</option>
                                            <option value="9">机电系</option>
                                            <option value="10">数学系</option>
                                            <option value="11">现代系</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="course-teacher" class="col-sm-2 col-form-label">教师:</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="course-teacher">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <div class="col-sm-12">
                                        <button type="submit" class="btn btn-outline-primary">提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
    <script type="module" src="../js/main.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            //当用户点击class是nav-tab的标签给该标签(添加之前删除active类)添加active类
            $(".nav-tab").click(function(e){
                //删除nav-tab所有的active类
                $(".nav-tab").removeClass("active");
                //给点击的标签添加active类
                $(this).addClass("active");
            })
        })
    </script>
</body>
</html>